<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOLOv5 RTSP目标检测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            max-width: 100%;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }

        h1 {
            color: #333;
            text-align: center;
            margin: 10px 0;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            background-color: white;
            padding: 10px 0;
            margin-bottom: 10px;
        }

        .stat-card {
            background-color: #e9f5ff;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            flex: 1;
            margin: 0 5px;
        }

        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #007bff;
        }

        .stat-label {
            font-size: 12px;
            color: #666;
        }

        .video-container {
            flex-grow: 1;
            position: relative;
            background-color: #000;
        }

        .video-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>YOLOv5 RTSP目标检测实时监控</h1>

        <div class="stats">
            <div class="stat-card">
                <div class="stat-value" id="fps">0</div>
                <div class="stat-label">FPS</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="objects">0</div>
                <div class="stat-label">检测目标</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="people">0</div>
                <div class="stat-label">人员</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="vehicles">0</div>
                <div class="stat-label">车辆</div>
            </div>
        </div>

        <div class="video-container">
            <img src="{{ url_for('video_feed') }}" alt="实时监控">
        </div>
    </div>

    <script>
        // 更新统计信息
        function updateStats() {
            fetch('/stats')
              .then(response => response.json())
              .then(data => {
                    document.getElementById('fps').textContent = data.fps.toFixed(1);
                    document.getElementById('objects').textContent = data.objects;
                    document.getElementById('people').textContent = data.people;
                    document.getElementById('vehicles').textContent = data.vehicles;
                })
              .catch(error => console.error('获取统计信息失败:', error));

            setTimeout(updateStats, 1000);
            // 每秒更新一次
        }

        // 启动统计信息更新
        updateStats();
    </script>
</body>

</html>